<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/vue.css">
    <script src="../static/js/jquery/jquery.js"></script>
    <script src="../static/js/vue/vue.js"></script>
    <script src="../static/js/element/index.js"></script>
</head>
<body>
<div id="app">
    <!--    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">-->
    <!--        <el-menu-item index="1">处理中心</el-menu-item>-->
    <!--        <el-submenu index="2">-->
    <!--            <template slot="title">我的工作台</template>-->
    <!--            <el-menu-item index="2-1">选项1</el-menu-item>-->
    <!--            <el-menu-item index="2-2">选项2</el-menu-item>-->
    <!--            <el-menu-item index="2-3">选项3</el-menu-item>-->
    <!--            <el-submenu index="2-4">-->
    <!--                <template slot="title">选项4</template>-->
    <!--                <el-menu-item index="2-4-1">选项1</el-menu-item>-->
    <!--                <el-menu-item index="2-4-2">选项2</el-menu-item>-->
    <!--                <el-menu-item index="2-4-3">选项3</el-menu-item>-->
    <!--            </el-submenu>-->
    <!--        </el-submenu>-->
    <!--        <el-menu-item index="3" disabled>消息中心</el-menu-item>-->
    <!--        <el-menu-item index="4"><a href="" target="_blank">订单管理</a></el-menu-item>-->
    <!--    </el-menu>-->
    <el-input v-model="form.text" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="click">显示</el-button>
    <el-radio v-if="display" v-model="radio" label="1">备选项</el-radio>
    <el-radio v-else v-model="radio" label="2">备选项1</el-radio>
    <!--    <span>{{form.text}}</span>-->
    <el-select v-model="value" placeholder="请选择">
        <el-option
                v-for="item in list"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</div>

</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            form: {
                text: "",
            },
            display: "",
            text: "",
            activeIndex: '1',
            activeIndex2: '1',
            list: [],
            tableData: [{date:'',name:'',address:''}],
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData: function () {
                let that = this;
                $.ajax({
                    url: "",
                    type: "GET",
                    // data: this.form,
                    success: function (data) {
                        that.tableData = data.tableData;
                    }
                });
            },
            click: function () {
                // this.$alert(this.form.text, '标题名称', {
                //     confirmButtonText: '确定',
                //     callback: action => {
                //         this.$message({
                //             type: 'info',
                //             message: "adfasdfasdfasdfasdf"
                //         });
                //     }
                // });

                $.ajax({
                    url: "",
                    type: "POST",
                    data: this.form,
                    success: function (data) {
                        that.display = data.display;
                    }
                });
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>